<template>
  <view class="container">
    <!-- 问题列表 -->
    <view class="questions_container">
      <view class="title">选择问题类型</view>
      <view class="questions">
        <view
          :class="selectedQuestions.indexOf(question) > -1 ? 'active' : ''"
          @tap="toggleChecked(question)"
          class="question"
          v-for="(question, index) in questions"
          :key="index"
        >{{question}}</view>
      </view>
    </view>
    <!-- 问题描述 -->
    <textarea v-model="detail" class="question_detail" placeholder="请描述一下您的问题" />
    <view class="upload_image_container">
      <view class="title">上传图片（0/4）</view>
      <view class="upload_container">
        <view class="upload_btn" @tap="chooseImage">+</view>
        <view class="upload_image" v-for="(path, index) in chooseImages" :key="index">
          <image :src="path" />
          <view class="iconfont icon-htmal5icon19"></view>
        </view>
      </view>
    </view>
    <view class="submit" @tap="submit">提交</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      questions: [
        "功能问题",
        "性能问题",
        "体验问题",
      ], // 问题列表
      selectedQuestions: [], // 已选问题
      chooseImages: [], // 选择上传的图片
      detail: "" // 问题描述
    };
  },

  methods: {
    // 选中/取消选中问题
    toggleChecked(question) {
      const targetIndex = this.selectedQuestions.findIndex(q => q === question);
      // 如果问题已经存在列表中，应该删除，否则添加
      if (targetIndex > -1) {
        this.selectedQuestions.splice(targetIndex, 1);
      } else {
        this.selectedQuestions.push(question);
      }
    },
    // 选择图片
    chooseImage() {
      // 如果已经选择四张图片，不能再选择
      if (this.chooseImages.length < 4) {
        uni.chooseImage({
          count: 4 - this.chooseImages.length,
          success: res => {
            this.chooseImages = this.chooseImages.concat(res.tempFilePaths);
            // uni.uploadFile({  })
          }
        });
      } else {
        uni.showToast({
          title: "最多只能上传四张图片",
          icon: "none"
        });
      }
    },
    // 提交代码到服务端
    submit() {
      // console.log(this.chooseImages, this.selectedQuestions, this.detail);
      // http.post('/')
      setTimeout(() => {
        uni.redirectTo({
          url: "/pages/feedback/index"
        });
      }, 1000);
    }
  }
};
</script>

<style lang="less">
page {
  background: #fafafa;
}
.container {
  .title {
    font-size: 26rpx;
    color: #434343;
  }
  .questions_container {
    background: #fff;
    margin: 20rpx;
    padding: 15rpx 30rpx;
    .questions {
      display: flex;
      flex-wrap: wrap;
      padding-top: 20rpx;
      justify-content: space-between;
      .question {
        background: #ededed;
        color: #545353;
        border-radius: 23px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20rpx;
        width: 181rpx;
        height: 46rpx;
        margin-bottom: 20rpx;
      }
      .question.active {
        background: #ffe6e6;
        border: 1rpx solid #ea4350;
        color: #ea4350;
      }
    }
    .questions::after {
      content: "";
      width: 181rpx;
    }
  }
  .question_detail {
    height: 391rpx;
    width: 711rpx;
    background: #fff;
    margin: 0 20rpx;
    padding: 20rpx;
    font-size: 26rpx;
    box-sizing: border-box;
  }
  .upload_image_container {
    margin: 20rpx;
    padding: 20rpx 18rpx;
    background-color: #fff;
    .upload_container {
      margin-top: 18rpx;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .upload_btn {
        background-color: #d8d8d8;
        color: #a6a6a6;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 128rpx;
        height: 128rpx;
        font-size: 80rpx;
      }
      .upload_image {
        margin-left: 9rpx;
        display: flex;
        justify-content: flex-start;
        position: relative;
        .iconfont {
          position: absolute;
          right: 0;
          top: -20rpx;
          color: #e03440;
          font-size: 44rpx;
          opacity: 0.8;
        }
        image {
          width: 128rpx;
          height: 128rpx;
        }
      }
    }
  }
  .submit {
    width: 711rpx;
    height: 70rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 30rxp;
    border-radius: 34rpx;
    background-color: #ea4350;
    margin-left: 21rpx;
  }
}
</style>